<template>
  <div class="form">
    <el-row>
      <!-- <d3ZSTP></d3ZSTP> -->
    </el-row>
  </div>
</template>

<script>
import d3ZSTP from './d3/d3ZSTP.vue';
export default {
  components: { d3ZSTP },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "固定",
        },
        {
          value: 0,
          label: "非固定",
        },
      ],
      value: "",
      form: {
        baseInfo: {
          username: "",
          pasword: "",
        },
        producte: [
          {
            name: "",
            rules: [
              {
                ruleName: null,
                isFixed: null,
                price: null,
                other: null,
              },
            ],
          },
        ],
      },
      rules: {
        "baseInfo.username": [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        "baseInfo.pasword": [
          { required: true, message: "请选择活动区域", trigger: "blur" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    //删除规则
    deleteRule(index, index1) {
      this.form.producte[index].rules.splice(index1, 1);
    },
    //添加规则
    addRule(index, index1) {
      console.log(index, index1);
      let producteItem = {
        name: "",
        ruleName: null,
        isFixed: null,
        price: null,
        other: null,
      };
      this.form.producte[index]["rules"].push(producteItem);
    },

    //创建新表
    createTable(index) {
      let newTable = {
        name: "",
        rules: [
          {
            ruleName: null,
            isFixed: null,
            price: null,
            other: null,
          },
        ],
      };
      this.form.producte.push(newTable);
    },
    //删除信表
    deleteTable(index) {
      this.form.producte.splice(index, 1);
    },
    //提交表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.first {
  background: rgba(250, 0, 0, 0.1);
}
.second {
  background: rgba(250, 250, 0, 0.5);
}
.el-tag {
  width: 100px;
  height: 40px;
  margin: 20px;
}
</style>
